<template>
  <div>
    <n-button @click="showAddModel = true">添加</n-button>
    <n-table :bordered="false" :single-line="false">
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(category, index) in categoryList">
          <td>{{ category.id }}</td>
          <td>{{ category.name }}</td>
          <td>
            <n-space>
              <n-button type="info" @click="toUpdate(category)">修改</n-button>
              <n-button type="warning" @click="deleteCategory(category)"
                >删除</n-button
              >
            </n-space>
          </td>
        </tr>
      </tbody>
    </n-table>
    <!-- 添加的弹出框 -->
    <n-modal v-model:show="showAddModel" preset="dialog" title="Dialog">
      <template #header>
        <div>添加分类</div>
      </template>
      <n-input
        v-model:value="addCategory.name"
        placeholder="输入要添加的分类名"
      />
      <template #action>
        <div>
          <n-button type="info" @click="add">提交</n-button>
        </div>
      </template>
    </n-modal>

    <!-- 修改的弹出框 -->
    <n-modal v-model:show="showUpdateModel" preset="dialog" title="Dialog">
      <template #header>
        <div>修改分类</div>
      </template>
      <n-input
        v-model:value="updateCategory.name"
        placeholder="输入要添加的分类名"
      />
      <template #action>
        <div>
          <n-button type="info" @click="update">提交</n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>

<script setup>
import { ref, reactive, inject, onMounted } from "vue"
import { AdminStore } from "../../store/AdminStore"
import { useRouter, useRoute } from "vue-router";
const router = useRouter()
const route = useRoute()
const axios = inject("axios")
const message = inject("message")
const dialog = inject("dialog")
const adminStore = AdminStore()
// 在页面挂载的时候请求数据
onMounted(() => {
  getDatas()
})

const categoryList = ref([])
const showAddModel = ref(false)
const showUpdateModel = ref(false)
const addCategory = reactive({
  name: ""
})
const updateCategory = reactive({
  id: "",
  name: ""
})
const getDatas = async () => {
  let res = await axios.get("/category/list")
  if (res.data.code == 200) {
    categoryList.value = res.data.rows
  } else if (res.data.code == 403) {
    message.error("请重新登录")
    router.push("/login")
  } else {
    message.error("数据请求失败")
  }
}
// 点击添加弹出框的提交按钮
const add = async () => {
  let res = await axios.post("/category/_token/add", { name: addCategory.name })
  if (res.data.code == 200) {
    getDatas()
    message.success("添加成功")
  } else {
    message.error("添加失败")
  }
  showAddModel.value = false
}

// 点击修改按钮
const toUpdate = (category) => {
  showUpdateModel.value = true
  updateCategory.id = category.id
  updateCategory.name = category.name
}
//点击修改弹出框的提交按钮
const update = async () => {
  let res = await axios.put("/category/_token/update", { id: updateCategory.id, name: updateCategory.name })
  if (res.data.code == 200) {
    getDatas()
    message.success("修改成功")
  } else {
    message.error("修改失败")
  }
  showUpdateModel.value = false
}


//点击删除按钮
const deleteCategory = async (category) => {
  dialog.warning({
    title: "警告",
    content: "确定删除吗",
    positiveText: "确定",
    negativeText: "取消",
    onPositiveClick: async () => {
      let res = await axios.delete(`/category/_token/delete?id=${category.id}`)
      if (res.data.code == 200) {
        message.success("删除成功")
        getDatas()
      } else {
        message.error("删除失败")
      }
    },
  });

}
</script>

<style lang="scss" scoped></style>
